/*
* © 2010 Autodata Solutions Company. All Rights Reserved
* This source code is the confidential and proprietary information of Autodata Solutions Company.
* The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
* without the prior written consent of Autodata Solutions Company.
*/
Ext.ns('net.autodata.compare.editorial');
(function() {

    var DQ = Ext.DomQuery;

    /**
    * This view class is used to control how the EditorialPanel is rendered
    * @class EditorialView
    * @extends net.autodata.AbstractView
    * @namespace net.autodata.compare.editorial
    */
    var View = Ext.extend(net.autodata.AbstractView, {

        /**
        * An optional extra CSS class that will be added to this component's Element (defaults to ''). 
        * This can be useful for adding customized styles to the component 
        * or any of its children using standard CSS rules.
        * @property cls
        * @type String
        */
        cls: '',

        /**
        * @property templates
        * @type Object
        */
        templates: undefined,

        /**
        * @property titlePanel
        * @type ca.autotrader.compare.editorial.EditorialTitleanel
        */
        titlePanel: undefined,

        /**
        * @property detailsPanels
        * @type Array<ca.autotrader.compare.editorial.EditorialDetailsPanel>
        */
        detailsPanels: undefined,

        //override the abstract constructor to allow this view to be created
        constructor: function() {
            this.competitorPanels = [];
            this.addEvents({
                /**
                * @event change
                * Fires when a new competitor is selected
                * @param {int} index
                * @param {String} acode
                */
                'change': true,

                /**
                * @event remove
                * Fires when a competitor is selected for removal
                * @param {int} index
                * @param {String} acode
                */
                'remove': true
            });
        },

        init: function() {
            View.superclass.init.apply(this, arguments);
        },

        /**
        * @method initTemplates
        */
        initTemplates: function() {
            var ts = this.templates || {};

            if (!ts.mainTpl) {

                ts.mainTpl = new Ext.XTemplate(
					'<div class="view {viewCls}" style="{[this.viewWidth(values.viewWidth)]}{[this.viewHeight(values.viewHeight)]}">',
					    '<div class="toolbar-wrap"></div>',
						'<div class="title-wrap"></div>',
						'<div class="details-wrap"></div>',
					'</div>',
					{
					    viewWidth: function(v) {
					        return Ext.isEmpty(v) ? '' : String.format('width:{0}px;', v);
					    },

					    viewHeight: function(v) {
					        return Ext.isEmpty(v) ? '' : String.format('height:{0}px;', v);
					    },

					    compile: true,
					    disableFormats: true
					}
				);
            }

            this.templates = ts;
        },

        /**
        * @method render
        */
        render: function() {
            if (!this.component) {
                return;
            }
            var panel = this.component;

            this.templates.mainTpl.append(panel.el.dom, {
                viewCls: this.cls || '',
                viewWidth: panel.width,
                viewHeight: panel.height
            });

            var tb = panel.getToolbar();
            tb.render(DQ.selectNode('.toolbar-wrap', panel.el.dom));
        },

        /**
        * @method refresh
        */
        removeItems: function(includeToolbar) {
            var panel = this.component;

            if (includeToolbar == true) {
                var item = DQ.selectNode('.toolbar-wrap', panel.el.dom);
                if (item != null) {
                    item.innerHTML = '';
                }
            }

            var item = DQ.selectNode('.title-wrap', panel.el.dom);
            if (item != null) {
                item.innerHTML = '';
            }
            item = DQ.selectNode('.details-wrap', panel.el.dom);
            if (item != null) {
                item.innerHTML = '';
            }

        },

        /**
        * @method refresh
        */
        refresh: function() {
            this.removeItems();

            var panel = this.component;

            var data = panel.getData();

            if (data) {
                if (data.vehicle) {
                    this.createEditorialTitlePanel(DQ.selectNode('.title-wrap', panel.el.dom), data.vehicle);
                }

                if (data.details && data.details.length > 0) {
                    for (var x = 0; x < data.details.length; ++x) {
                        this.createEditorialDetailPanel(DQ.selectNode('.details-wrap', panel.el.dom), data.details[x]);
                    }
                } else {
                    this.createEditorialDetailPanel(DQ.selectNode('.details-wrap', panel.el.dom), null);
                }
            }
        },

        /**
        * @method createBaseVehiclePanel
        * @param {String} renderTo
        * @param {Ext.data.Record} vehicle
        * @param {Object} [viewCfg]
        */
        createEditorialTitlePanel: function(renderTo, data) {
            return new net.autodata.compare.editorial.EditorialTitlePanel({
                view: new net.autodata.compare.editorial.EditorialTitleView(),
                renderTo: renderTo,
                data: data
            });
        },

        /**
        * @method createCompetitorVehiclePanel
        * @param {String} renderTo
        * @param {Ext.data.Record} vehicle
        * @param {int} index
        */
        createEditorialDetailPanel: function(renderTo, data) {
            var panel = this.component;

            return new net.autodata.compare.editorial.EditorialDetailPanel({
                view: new net.autodata.compare.editorial.EditorialDetailView(),
                emptyText: panel.emptyText,
                renderTo: renderTo,
                data: data
            });
        }

    });

    net.autodata.compare.editorial.EditorialView = View;
})();